<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="utf-8">
        <title>Galleria Classic Theme Demo 02</title>
        {{include 'web2py_ajax.html'}}
<script src="{{=URL(r=request,c='static',f='plugin_galleria/galleria.js')}}"></script>

        <style>
        body{background:#000;}
        </style>
    </head>
<body>
    <div class="content">
        <h1>Extending Galleria with options, custom thumbnails, HTML captions and a lightbox popup</h1>
        <div id="galleria">
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/2/2b/Frederic_fontaine_1.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Frederic_fontaine_1.jpg/120px-Frederic_fontaine_1.jpg">
                </a>
                <!-- you can add html captions like this and define them in the data_config option: -->
                <strong>Swamp ipsum</strong>
                <span>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing <em>elit</em>. Etiam quam velit, aliquet nec sodales vel, porttitor id justo. </span>
            
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/800px-Basket_of_strawberries_red_accent.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/120px-Basket_of_strawberries_red_accent.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/2/2d/Ns1-unsharp.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Ns1-unsharp.jpg/120px-Ns1-unsharp.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/800px-Laser_effects.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/120px-Laser_effects.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/800px-PizBernina3.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/120px-PizBernina3.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/800px-La_Galera_2.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/150px-La_Galera_2.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/800px-Costa_rica_santa_elena_skywalk.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/150px-Costa_rica_santa_elena_skywalk.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/800px-Kuznetsk_Alatau_3.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/150px-Kuznetsk_Alatau_3.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/800px-Smoky_forest.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/150px-Smoky_forest.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/500px-Alcea_rosea_and_blue_sky.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/150px-Alcea_rosea_and_blue_sky.jpg">
                </a>
            </div>
        </div>
        <p>You can use the <code>data_config</code> option to define where to fetch the html caption for each image. This example will also bind a click event to each image and open a lightbox when clicked.</p>
        <p>View source for comments and code.</p>
    </div>
 
    <script>
    
    // Load theme
    Galleria.loadTheme('{{=URL(r=request,c='static',f='plugin_galleria/themes/classic/galleria.classic.js')}}');

    // run galleria and add some options
    $('#galleria').galleria({
        image_crop: true, // crop all images to fit
        thumb_crop: true, // crop all thumbnails to fit
        transition: 'fade', // crossfade photos
        transition_speed: 700, // slow down the crossfade
        data_config: function(img) {
            // will extract and return image captions from the source:
            return  {
                title: $(img).parent().next('strong').html(),
                description: $(img).parent().next('strong').next().html()
            };
        },
        extend: function() {
            this.bind(Galleria.IMAGE, function(e) {
                // bind a click event to the active image
                $(e.imageTarget).css('cursor','pointer').click(this.proxy(function() {
                    // open the image in a lightbox
                    this.openLightbox();
                }));
            });
        }
    });
    </script>
    </body>
</html>
